<template>
    <div class="Control_Top">
        <img src="../../assets/Control_Top.png" alt="">
    </div>
    <div class="Control_main">
        <div class="main_left">
            <Utilize />
            <Load />
            <Manufacturer />
        </div>
        <div class="main_middle">
            <Fault />
            <ProvincialEquipment />
        </div>
        <div class="main_right">
            <StateDistribution />
            <FrequentlyHappen />
            <NumberOfFaults />
        </div>
    </div>
</template>

<script setup>
import Utilize from '../../components/Utilize/Utilize.vue';
import Load from '../../components/Load/Load.vue';
import Manufacturer from '../../components/Manufacturer/Manufacturer.vue';
import StateDistribution from '../../components/StateDistribution/StateDistribution.vue';
import FrequentlyHappen from '../../components/FrequentlyHappen/FrequentlyHappen.vue';
import NumberOfFaults from '../../components/NumberOfFaults/NumberOfFaults.vue';
import Fault from '../../components/Fault/Fault.vue';
import ProvincialEquipment from '../../components/ProvincialEquipment/ProvincialEquipment.vue';


</script>

<style lang="scss" scoped>
.Control_Top {
    width: 100%;
    height: 50px;
    text-align: center;
    line-height: 50px;
    background: rgb(10, 6, 81);
    color: #fff;
    font-size: 20px;

    img {
        width: 100%;
        height: 100%;
    }
}

.Control_main {
    width: 100%;
    height: 100%;
    background: rgb(10, 6, 81);
    color: #fff;
    display: flex;

    .main_left {
        width: 420px;
        height: 100%;
        background: #00194A;
    }

    .main_middle {
        flex: 1;
        background: #00194A;
    }

    .main_right {
        width: 420px;
        height: 100%;
        background: #00194A;
    }
}
</style>